<template>
<div 
    ref="SearchEl"
    class="search-cp"
    :style="{
        backgroundColor: (selectWebsiteShow || isFocus)?'#ffffff':'',
        boxShadow: (selectWebsiteShow || isFocus)?'inset 0 0 0 0.3rem rgb(49, 50, 54),0 0 10px rgba(0,0,0,.136)':'',
        '--themeColor':(themeMode==='black')?'#ffffff':'rgb(43, 45, 49)',
        '--searchWidth':(searchWidth||80)+'rem',
        '--searchHeight':(searchHeight||6.5)+'rem',
        'opacity':(selectWebsiteShow || isFocus)?1:searchOpacity,
        '--searchRadius':searchRadius+'rem',
    }">
    <div 
        ref="EngineBt"
        class="engine-bt"
        @click="()=>{
            selectEngineShow = (!selectEngineShow);
            selectWebsiteShow = false;
            selectSugShow = false;
        }">
        <el-image
            :src="engine.icon"
            fit="cover">
            <div slot="error">
            </div>
        </el-image>
    </div>
    <el-input
        ref="InputEl"
        clearable
        v-model="inputData" 
        placeholder="请输入你想搜的 || 网站名"
        @keypress.native.enter="onEnterPress"
        @click.native="initSearchData"
        @blur="isFocus=false"
        @focus="()=>{
            isFocus = true;
            selectWebsiteShow = !!inputData;
            selectSugShow = !!inputData;
            this.imgBgMode = true;
        }"
        @input="onInput">
    </el-input>
    <div 
        class="search-bt" 
        @click="onSearchClick"
        :style="{
            color: selectWebsiteShow || isFocus?'#112d4e':'',
        }">
        <i class="el-icon-search"></i>
    </div>
    <div class="select-engine" v-show="selectEngineShow">
        <SelectEngine
            ref="SelectEngine"
            :keyWord="inputData"
            @onChange="(data)=>{
                engine = data;
                selectEngineShow=false;
            }">
        </SelectEngine>
    </div>
    <div class="select-web" v-show="selectWebsiteShow">
        <SelectWebsite
            ref="SelectWebsite"
            :keyWord="searchData"
            @onChange="({currentData})=>{
                currentWebsite = currentData;
                inputData = currentData?currentData.name:searchData;
            }">
        </SelectWebsite>
    </div>
    <div class="select-sug" v-show="selectSugShow">
        <SelectBaiduSug
            ref="SelectBaiduSug"
            :engine="engine"
            :keyWord="searchData"
            @onChange="({currentData})=>{
                currentSug = currentData;
                inputData = currentData || searchData;
            }">
        </SelectBaiduSug>
    </div>
</div>
</template>

<script>
/*
 首页的搜索框组件
 */
import SelectWebsite from "@/components/public/SelectWebsite";
import SelectBaiduSug from "@/components/public/SelectBaiduSug";
import SelectEngine from "@/components/public/SelectEngine";
import {throttleFn} from '@/common/DebounceAndThrottle';
export default {
    name: 'Search',
    components: {
        SelectWebsite,
        SelectBaiduSug,
        SelectEngine,
    },
    props:{
        themeMode:{  //主题模式
            type:String,
            default:'black',
        },
    },
    data(){
        return {
            inputData:'',  //与输入框双向绑定的数据
            searchData:'',  //需要搜索的数据
            selectSugShow:false, //控制选择关键词组件的显示
            selectWebsiteShow:false, //控制选择网站组件的显示
            selectEngineShow:false, //控制选择搜索引擎组件的显示
            currentWebsite:null, //当前选择的网站
            currentSug:null, //当前选择的词条
            isFocus:false, //输入框是否聚焦
        };
    },
    computed:{
        searchInputData:{  //全局的搜索输入框里的数据
            set:throttleFn(function (newValue){  //防止卡顿
                this.$store.commit('index/setSearchInputData',newValue);
            },16),
            get(){
                return this.$store.state.index.searchInputData;
            },
        },
        imgBgMode:{  //全局背景图片的模式
            set(newValue){  //只有写入
                this.$store.commit('public/setImgBgMode',newValue);
            },
            get(){
                return this.$store.state.public.imgBgMode;
            },
        },
        engine:{  //全局的搜索引擎
            set(newValue){
                this.$store.commit('public/setEngine',newValue);
            },
            get(){
                return this.$store.state.public.engine;
            },
        },
        selectWebsiteShowLock(){  //网站选择组件显示锁
            return this.$store.state.public.selectWebsiteShowLock;
        },
        configShow(){  //网站设置组件的隐藏
            return this.$store.state.public.configShow;;
        },
        selectSugShow(){  //全局控制显示
            return this.$store.state.config.selectSugShow;;
        },
        selectWebsiteShow(){
            return this.$store.state.config.selectWebsiteShow;;
        },
        searchWidth(){
            return this.$store.state.config.searchWidth;;
        },
        searchHeight(){
            return this.$store.state.config.searchHeight;;
        },
        searchRadius(){
            return this.$store.state.config.searchRadius;;
        },
        searchOpacity(){
            return this.$store.state.config.searchOpacity;;
        },
    },
    mounted(){
        this.initAutoFocus();
        this.initHiddenEvent();
    },
    methods:{
        initAutoFocus(){  //键盘事件，自动聚焦
            window.addEventListener('keydown',(event)=>{
                event = event || window.event || arguments.callee.caller.arguments[0];
                let keycode = event.keyCode ;
                if(event.shiftKey || event.ctrlKey || event.altKey) return;  //必须只是字母键键
                if(!this.isActive()) return;
                if(this.configShow || this.selectWebsiteShow || this.selectSugShow || this.selectEngineShow) return;  //如果网站配置组件显示的话不自动聚焦
                if(this.selectWebsiteShowLock) return; //如果加了锁则不能聚焦
                if((keycode>=65 && keycode<=90) || keycode==32) { //按下字母键或者空格键自动聚焦
                    if(!this.$refs.InputEl) return;
                    this.$refs.InputEl.focus();
                }
            });
        },
        initHiddenEvent(){  //初始化隐藏事件
            document.addEventListener('click', event => {  //如果元素不是在组件上点击的则隐藏该组件
                const e = event || window.event;
                const SearchEl = this.$refs.SearchEl;
                const EngineBt = this.$refs.EngineBt;
                if(!e || !this.isActive()) return;
                if(!SearchEl || !EngineBt) return;
                if (this.$refs.SearchEl.contains(e.target)) return;  //如果点击事件在组件上
                if (this.selectWebsiteShowLock) return; //如果加了锁则不能隐藏
                this.selectWebsiteShow = false;
                this.selectEngineShow = false;
                this.imgBgMode = false; //同时改变背景图显示模式
            });
        },
        onInput(){ //数值改变时触发
            this.selectWebsiteShow = !!this.inputData;
            this.selectSugShow = !!this.inputData;
            //当搜索框里的值与选择的一样是不触发搜索
            if(this.inputData == this.currentWebsite?.name || this.inputData == this.currentSug) return;
            this.searchData = this.inputData;
            this.searchInputData = this.inputData;
        },
        onEnterPress(){ //enter键按下事件
            let currentWebsite = this.currentWebsite; //当前选择的网站
            if(currentWebsite){ //如果选择了网站，则跳转到该网站
                window.open(currentWebsite.link);
            }else{ //跳转到相应搜索引擎搜索输入框的值
                let engine = this.engine.search;
                let inputData = this.inputData;
                this.handSearchByEngine(engine,inputData);
            }
        },
        onSearchClick(){ //搜索按钮点击事件
            let engine = this.engine.search;
            let inputData = this.inputData;
            this.handSearchByEngine(engine,inputData);
        },
        handSearchByEngine(engine,searchData){ //根据搜索引擎进行搜索
            let url = engine.replace("{searchData}",encodeURI(searchData));
            window.open(url);
        },
        initSearchData(){ //重新搜索赋值
            if(this.$refs.SelectWebsite){
                this.$refs.SelectWebsite.initCurrentIndex(); //防止选择名字与搜索框数据一样的网站不会触发监听导致无法清除所选网站
            }
            if(this.$refs.SelectBaiduSug){
                this.$refs.SelectBaiduSug.initCurrentIndex();
            }
            this.searchData = this.inputData;
        },
        isActive(){  //是否是当前活动的组件
            const el = this.$el;
            if(!el) return false;
            return !!(el.clientWidth || el.clientHeight);
        },
    },
}
</script>
<style scoped lang="scss">
@media only screen and (max-width: 620px){  //手机
    .search-cp{
        max-width: 600px !important;
        height: 60px !important;
        box-shadow: inset 0 0 0 3px var(--themeColor),0 0 10px rgba(0,0,0,.136);
        border-radius: 5px;
        &:hover{
            box-shadow: inset 0 0 0 3px rgb(49, 50, 54),0 0 10px rgba(0,0,0,.136);
        }
        &:focus-within{
            box-shadow: inset 0 0 0 3px rgb(49, 50, 54),0 0 10px rgba(0,0,0,.136) !important;
        }
        >.engine-bt{
            padding: 0 15px;
            /deep/.el-image{
                width: 30px;
                height: 30px;
                img{
                    width: 30px;
                    height: 30px;
                }
            }
        }
        /deep/.el-input{
            height: 60px;
            .el-input__inner{
                height: 60px;
            }
            i{
                font-size: 17px;
            }
            input{
                font-size: 16px;
            }
        }
        >.search-bt{
            margin-left: 3px;
            padding: 0 15px;
            i{
                font-size: 20px;
            }
        }
    }
}
@media only screen and (min-width: 620px){  //pc
    .search-cp{
        // max-width: 80rem !important;
        // height: 6.5rem !important;
        max-width: var(--searchWidth) !important;
        height: var(--searchHeight) !important;
        border-radius: var(--searchRadius);
        box-shadow: inset 0 0 0 0.3rem var(--themeColor),0 0 10px rgba(0,0,0,.136);
        &:hover{
            box-shadow: inset 0 0 0 0.3rem rgb(49, 50, 54),0 0 10px rgba(0,0,0,.136);
        }
        &:focus-within{
            box-shadow: inset 0 0 0 0.3rem rgb(49, 50, 54),0 0 10px rgba(0,0,0,.136);
        }
        >.engine-bt{
            padding: 0 1.8rem;
            /deep/.el-image{
                width: 3rem;
                height: 3rem;
                img{
                    width: 3rem;
                    height: 3rem;
                }
            }
        }
        /deep/.el-input{
            height: var(--searchHeight);
            .el-input__inner{
                height: var(--searchHeight);
            }
            i{
                font-size: 2rem;
            }
            input{
                font-size: 2rem;
            }
        }
        >.search-bt{
            margin-left: 0.5rem;
            padding: 0 2rem;
            i{
                font-size: 2.5rem;
            }
        }
    }
}
.search-cp{
    width: 100%;
    border: 0px solid #ffffff;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    align-items: center;
    align-content: stretch;
    position: relative;
    transition: all 0.2s;
    &:hover{
        background-color: white;
        opacity: 1 !important;
        >.search-bt{
            color: #112d4e;
        }
    }
    >.engine-bt{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 999;
        transition: all 0.2s;
        cursor: pointer;
        /deep/.el-image{
            border-radius: var(--searchRadius);
            img{
                border-radius: var(--searchRadius);
            }
        }
    }
    /deep/.el-input{
        .el-input__inner{
            padding: 0;
            border: none !important;
        }
        i{
            font-weight: bold;
            color: #112d4e;
            opacity: 0.5;
        }
        input{
            line-height: 1.5;
            color: #112d4e;
            background-color: transparent;
        }
        span{
            display: flex;
            justify-content: center;
            align-items: center;
            i{
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    >.search-bt{
        width: fit-content;
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        color:var(--themeColor);
        transition: all 0.2s;
        &:hover{
            color: red;
        }
        i{
            font-weight: bold;
            color: inherit;
        }
    }
    >.select-engine{
        position:absolute;
        left: 0;
        width: 100%;
        max-width: 100%;
        z-index: 100;
        top: calc(100% + 5px);
    }
    >.select-web{
        position:absolute;
        left: 0;
        width: 100%;
        max-width: 100%;
        z-index: 100;
        top: calc(100% + 5px);
    }
    >.select-sug{
        position:absolute;
        left: 0;
        width: 100%;
        max-width: 100%;
        z-index: 999;
        bottom: calc(100% + 5px);
    }
}
</style>

